<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Devin 开发者指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .first-letter::first-letter {
            font-size: 3.5em;
            float: left;
            line-height: 0.85;
            margin-right: 0.1em;
            font-weight: 700;
            color: #3b82f6;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-blue-900 to-indigo-900 text-white py-24 px-4">
        <div class="max-w-6xl mx-auto relative z-10">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-2/3 pr-8">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                        <span class="gradient-text">Devin</span> <br>开发者操作指南
                    </h1>
                    <p class="text-xl md:text-2xl opacity-90 mb-8 serif">
                        一套全面而优雅的开发规范与最佳实践，助您高效完成任务
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#commands" class="bg-white text-blue-900 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition">
                            <i class="fas fa-code mr-2"></i>查看命令参考
                        </a>
                        <a href="#workflow" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">
                            <i class="fas fa-project-diagram mr-2"></i>工作流程指南
                        </a>
                    </div>
                </div>
                <div class="md:w-1/3 mt-12 md:mt-0">
                    <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6 border border-white border-opacity-20">
                        <div class="flex items-center mb-4">
                            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        </div>
                        <div class="bg-black bg-opacity-50 rounded-lg p-4 font-mono text-sm">
                            <p class="text-green-400">$ devin init</p>
                            <p class="text-gray-400">✓ 系统初始化完成</p>
                            <p class="text-green-400">$ devin run task</p>
                            <p class="text-gray-400">⌛ 分析代码库...</p>
                            <p class="text-gray-400">✓ 发现32个相关文件</p>
                            <p class="text-gray-400">✓ 准备执行计划</p>
                            <p class="text-blue-400 animate-pulse">➜ 准备就绪，开始任务</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute inset-0 overflow-hidden opacity-20">
            <div class="absolute top-0 right-0 w-64 h-64 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-70"></div>
            <div class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-70"></div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 px-4 max-w-6xl mx-auto">
        <div class="mb-12 text-center">
            <h2 class="text-3xl font-bold mb-4">优雅而高效的开发体验</h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                Devin提供了一套完整的开发规范和工作流程，帮助您在复杂的工程任务中保持高效、准确和一致。
            </p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8 mb-16">
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <div class="text-blue-600 text-3xl mb-4">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">安全第一</h3>
                <p class="text-gray-600">
                    严格的数据安全规范，确保代码和客户数据始终安全。绝不共享敏感信息，遵循安全最佳实践。
                </p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <div class="text-indigo-600 text-3xl mb-4">
                    <i class="fas fa-project-diagram"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">系统化工作流程</h3>
                <p class="text-gray-600">
                    清晰的"规划"和"标准"两种工作模式，确保任务执行前充分了解上下文，减少错误。
                </p>
            </div>
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <div class="text-purple-600 text-3xl mb-4">
                    <i class="fas fa-code"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">编码最佳实践</h3>
                <p class="text-gray-600">
                    遵循项目现有模式，保持代码风格一致。谨慎使用第三方库，优先使用项目已有工具。
                </p>
            </div>
        </div>
    </section>

    <!-- Workflow Section -->
    <section id="workflow" class="py-16 bg-gray-50 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center">工作流程指南</h2>
            
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-6 text-blue-800 flex items-center">
                    <i class="fas fa-list-check mr-3"></i>规划模式(Planning Mode)
                </h3>
                <div class="bg-white rounded-xl shadow-md p-6">
                    <p class="first-letter mb-4">
                        在规划模式下，您的任务是收集完成任务所需的所有信息，确保完全理解用户需求。仔细分析代码库，使用搜索功能查找相关文件，必要时通过浏览器查找在线资源补充信息。
                    </p>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 my-4">
                        <p class="font-medium text-blue-800">关键行动点：</p>
                        <ul class="list-disc pl-5 mt-2 space-y-2">
                            <li>使用搜索命令查找相关代码</li>
                            <li>通过LSP命令理解符号定义和引用</li>
                            <li>必要时请求用户提供额外信息或凭证</li>
                            <li>准备就绪后调用<suggest_plan/></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-6 text-indigo-800 flex items-center">
                    <i class="fas fa-gears mr-3"></i>标准模式(Standard Mode)
                </h3>
                <div class="bg-white rounded-xl shadow-md p-6">
                    <p class="first-letter mb-4">
                        在标准模式下，您将按照规划执行具体任务。用户会显示当前和可能的下一步计划步骤。您可以输出当前或可能下一步计划步骤的任何操作。确保严格遵守计划要求。
                    </p>
                    <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 my-4">
                        <p class="font-medium text-indigo-800">关键行动点：</p>
                        <ul class="list-disc pl-5 mt-2 space-y-2">
                            <li>使用编辑器命令修改文件</li>
                            <li>批量执行相似更改时使用find_and_edit命令</li>
                            <li>运行测试和lint检查</li>
                            <li>必要时与用户沟通任务进展</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Workflow Diagram -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-16">
                <h3 class="text-2xl font-bold mb-6 text-purple-800 flex items-center">
                    <i class="fas fa-diagram-project mr-3"></i>典型工作流程
                </h3>
                <div class="mermaid">
                    graph TD
                        A[接收用户任务] --> B{需要额外信息?}
                        B -->|是| C[进入规划模式]
                        C --> D[搜索代码库]
                        C --> E[查找在线资源]
                        C --> F[请求用户提供信息]
                        C --> G[调用suggest_plan]
                        B -->|否| H[进入标准模式]
                        H --> I[执行计划步骤]
                        I --> J{任务完成?}
                        J -->|否| I
                        J -->|是| K[通知用户]
                </div>
                <p class="mt-4 text-sm text-gray-500">
                    注：此流程图展示了Devin处理任务的典型流程，根据实际情况可能有所调整。
                </p>
            </div>
        </div>
    </section>

    <!-- Commands Reference -->
    <section id="commands" class="py-16 px-4 max-w-6xl mx-auto">
        <h2 class="text-3xl font-bold mb-12 text-center">命令参考手册</h2>
        
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <!-- Editor Commands -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-blue-600 text-white px-6 py-4">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fas fa-file-code mr-3"></i>编辑器命令
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-bold text-blue-800">打开文件</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;open_file path="/path/to/file" /&gt;
                            </div>
                            <p class="text-sm text-gray-600 mt-1">查看文件内容，支持图片查看</p>
                        </div>
                        <div>
                            <h4 class="font-bold text-blue-800">编辑文件</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;str_replace path="/path/to/file"&gt;<br>
                                &nbsp;&nbsp;&lt;old_str&gt;原内容&lt;/old_str&gt;<br>
                                &nbsp;&nbsp;&lt;new_str&gt;新内容&lt;/new_str&gt;<br>
                                &lt;/str_replace&gt;
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-blue-800">创建文件</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;create_file path="/path/to/newfile"&gt;内容&lt;/create_file&gt;
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Search Commands -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-indigo-600 text-white px-6 py-4">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fas fa-search mr-3"></i>搜索命令
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-bold text-indigo-800">内容搜索</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;find_filecontent path="/path" regex="pattern" /&gt;
                            </div>
                            <p class="text-sm text-gray-600 mt-1">在指定路径搜索匹配内容</p>
                        </div>
                        <div>
                            <h4 class="font-bold text-indigo-800">文件名搜索</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;find_filename path="/path" glob="*.py" /&gt;
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-indigo-800">语义搜索</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;semantic_search query="搜索内容" /&gt;
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <!-- Shell Commands -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-purple-600 text-white px-6 py-4">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fas fa-terminal mr-3"></i>Shell命令
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-bold text-purple-800">执行命令</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;shell exec_dir="/path"&gt;command&lt;/shell&gt;
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-purple-800">查看输出</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;view_shell id="shellId" /&gt;
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-purple-800">终止进程</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;kill_shell_process id="shellId" /&gt;
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Browser Commands -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-green-600 text-white px-6 py-4">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fas fa-globe mr-3"></i>浏览器命令
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-bold text-green-800">导航</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;navigate_browser url="https://example.com" /&gt;
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-green-800">交互</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;click_browser coordinates="x,y" /&gt;<br>
                                &lt;type_browser&gt;文本内容&lt;/type_browser&gt;
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-green-800">查看</h4>
                            <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                                &lt;view_browser /&gt;
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- User Interaction -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
            <div class="bg-amber-600 text-white px-6 py-4">
                <h3 class="text-xl font-bold flex items-center">
                    <i class="fas fa-comments mr-3"></i>用户交互命令
                </h3>
            </div>
            <div class="p-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-bold text-amber-800">发送消息</h4>
                        <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                            &lt;message_user&gt;消息内容&lt;/message_user&gt;
                        </div>
                    </div>
                    <div>
                        <h4 class="font-bold text-amber-800">请求认证</h4>
                        <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                            &lt;message_user request_auth="true"&gt;<br>
                            &nbsp;&nbsp;请提供API密钥<br>
                            &lt;/message_user&gt;
                        </div>
                    </div>
                    <div>
                        <h4 class="font-bold text-amber-800">等待</h4>
                        <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                            &lt;wait on="user" seconds="5" /&gt;
                        </div>
                    </div>
                    <div>
                        <h4 class="font-bold text-amber-800">报告问题</h4>
                        <div class="bg-gray-100 p-3 rounded-md font-mono text-sm overflow-x-auto">
                            &lt;report_environment_issue&gt;<br>
                            &nbsp;&nbsp;环境问题描述<br>
                            &lt;/report_environment_issue&gt;
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Best Practices -->
    <section class="py-16 bg-blue-50 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center">编码最佳实践</h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center text-blue-800">
                        <i class="fas fa-check-circle mr-3"></i>应该做的
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>理解文件代码规范后再修改，保持风格一致</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>创建新组件前先参考现有组件实现</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>修改代码前先查看其上下文和引用关系</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>测试失败时首先检查自己的代码而非测试</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center text-red-800">
                        <i class="fas fa-times-circle mr-3"></i>避免做的
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                            <span>假设第三方库可用而未检查项目是否已使用</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                            <span>修改测试用例而非修复代码问题</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                            <span>添加不必要的注释，代码应自解释</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                            <span>强制推送或使用git add .添加所有文件</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Data Security -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="text-xl font-bold mb-4 flex items-center text-purple-800">
                    <i class="fas fa-lock mr-3"></i>数据安全规范
                </h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium mb-2">敏感数据处理</h4>
                        <ul class="list-disc pl-5 space-y-1 text-gray-700">
                            <li>将代码和客户数据视为敏感信息</li>
                            <li>未经用户明确许可绝不与第三方共享数据</li>
                            <li>绝不提交密钥或敏感信息到代码库</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium mb-2">安全实践</h4>
                        <ul class="list-disc pl-5 space-y-1 text-gray-700">
                            <li>不在代码中暴露或记录密钥(除非用户要求)</li>
                            <li>遵循组织安全最佳实践</li>
                            <li>谨慎处理认证和授权相关代码</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Git/GitHub Section -->
    <section class="py-16 px-4 max-w-6xl mx-auto">
        <h2 class="text-3xl font-bold mb-12 text-center">Git与GitHub操作规范</h2>
        
        <div class="grid md:grid-cols-2 gap-8">
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="text-xl font-bold mb-4 flex items-center text-blue-800">
                    <i class="fab fa-git-alt mr-3"></i>分支管理
                </h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="fas fa-code-branch text-xs"></i>
                        </div>
                        <span>默认分支命名格式: <code class="bg-gray-100 px-1 rounded">devin/{timestamp}-{feature-name}</code></span>
                    </li>
                    <li class="flex items-start">
                        <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-xs"></i>
                        </div>
                        <span>绝不强制推送，遇到推送问题请求用户协助</span>
                    </li>
                    <li class="flex items-start">
                        <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="fas fa-file-code text-xs"></i>
                        </div>
                        <span>谨慎添加文件，不盲目使用<code class="bg-gray-100 px-1 rounded">git add .</code></span>
                    </li>
                </ul>
            </div>
            
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="text-xl font-bold mb-4 flex items-center text-indigo-800">
                    <i class="fab fa-github mr-3"></i>Pull Request管理
                </h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="fas fa-eye text-xs"></i>
                        </div>
                        <span>使用<code class="bg-gray-100 px-1 rounded">&lt;git_view_pr&gt;</code>查看PR详情</span>
                    </li>
                    <li class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="fas fa-tasks text-xs"></i>
                        </div>
                        <span>使用<code class="bg-gray-100 px-1 rounded">&lt;gh_pr_checklist&gt;</code>跟踪评论状态</span>
                    </li>
                    <li class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="fas fa-sync-alt text-xs"></i>
                        </div>
                        <span>用户跟进时，将更改推送到同一PR(除非另有指示)</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ 
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 卡片悬停效果增强
        const cards = document.querySelectorAll('.card-hover');
        cards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                const icon = card.querySelector('i');
                if (icon) {
                    icon.classList.add('animate-pulse');
                }
            });
            card.addEventListener('mouseleave', () => {
                const icon = card.querySelector('i');
                if (icon) {
                    icon.classList.remove('animate-pulse');
                }
            });
        });
    </script>
</body>
</html>